<template>
  <div>
    <Head-Top></Head-Top>
    <div class="all_con">
      <h3 class="head_h3">
        编辑代理商
      </h3>
      <div class="table_container">
        <el-form :model="editAgentInfo.formDatas" status-icon :rules="rules1" ref="ruleForm" label-width="100px" class="demo-ruleForm"
                 label-position="right">
          <el-form-item label="真实姓名" prop="realName">
            <el-col :span="10">
              <el-input placeholder="被编辑代理的真实姓名" type="text" v-model="editAgentInfo.formDatas.realName"></el-input>
            </el-col>
          </el-form-item>

          <el-form-item label="身份证号码" prop="iDnumber">
            <el-col :span="10">
              <el-input placeholder="被编辑代理的居民身份证号码" type="number" v-model="editAgentInfo.formDatas.iDnumber"></el-input>
            </el-col>
          </el-form-item>
          <el-form-item label="代理商地址">
            <el-col :span="10">
              <v-distpicker :province="editAgentInfo.range.province" :city="editAgentInfo.range.city" :area="editAgentInfo.range.area"  @selected="onSelected"></v-distpicker>
            </el-col>
          </el-form-item>
          <div class="form_ctrl">
            <el-form-item style="margin-left: 240px" label-width="0px">
              <el-button class="submit_btn" size="medium" type="default" @click="cancelForm('ruleForm')">取消</el-button>
              <el-button class="submit_btn" size="medium" type="primary" @click="submitForm('ruleForm')">确认</el-button>
            </el-form-item>
          </div>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
  import HeadTop from '../components/HeadTop'
  import {getAgentById,editAgent,updateUserData} from "../api/getData";
  import VDistpicker from 'v-distpicker'
  import {mapActions, mapState, mapMutations,mapGetters} from 'vuex'
  export default {
    name: "EditAgent",
    components: {
      HeadTop
    },
    data() {
      let validaterealName = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入代理姓名'));
        } else {
          callback();
        }
      }
      let validateiDnumber = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入代理身份证号码'));
        } else {
          callback();
        }
      }

      return {
        range:{
          province:'',
          city:'',
          area:''
        },
        rules1: {
          realName: [
            {validator: validaterealName, trigger: 'blur'}
          ],

          iDnumber: [
            {validator: validateiDnumber, trigger: 'blur'}
          ],
        }
      }
    },
    computed:{
      ...mapState(['editAgentInfo']),
    },
    methods: {
      ...mapActions(['getAgentList']),
      ...mapMutations(['changeAgentAddress']),
      onSelected(data){
        this.changeAgentAddress(data)
      },
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            let params={...this.editAgentInfo.formDatas}
            updateUserData(params)
              .done(res=>{
                if(res.message=='success'){
                  this.$message({
                    type:'success',
                    message:'修改成功！'
                  })
                  this.$router.replace({
                    path:'/agent'
                  })
                  this.getAgentList()
                }
              })

          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      cancelForm() {
        this.$router.go(-1);
      }
    }
  }
</script>

<style lang="less" scoped>
  @import "../style/table";
</style>
